<template>
	<view class="content">
		<view class="head">
			<u-search
				placeholder="请输入您所需要的产品名称"
				v-model="keyword"
				shape="round"
				:clearabled="true"
				bg-color="transparent"
				:show-action="true"
				action-text="取消"
				color="#DCDCDC"
				placeholder-color="#DCDCDC"
				animation
				border-color="#FFFFFF"
				@clear="shutDn"
				@change="changeContent"
				@custom="cancelClk"
				@search="usrSubmission"
			></u-search>
			<!-- 默认搜索 -->
			<view class="defSrch" v-if="show === 0">
				<view class="hst f j-b" v-if="user.length > 0">
					<text class="text">搜索历史</text>
					<text class="text1" @click="clearHst">消除历史</text>
				</view>

				<view class="list1 f f-w" v-if="user.length > 0">
					<view class="text" v-for="(item, index) in user" :key="index" @click="clkToJump2(item)">{{ item.search }}</view>
				</view>
				<!-- 热门 -->
				<view class="list2">
					<view class="popularSearches">热门搜索</view>
					<view class="mingcheng f f-w">
						<view v-for="(item1, index1) in hot" :key="index1">
							<text @click="clkToJump1(item1)">{{ item1.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐搜索 -->
			<view class="recommendedSrch" v-if="show === 1">
				<view class="hst f j-s"><text class="text">推荐搜索</text></view>
				<view v-for="(item2, index2) in rcmd" :key="index2">
					<view class="list a-cr" @click="clkToJump(item2)">
						<u-icon name="search" color="#FFFFFF" size="24"></u-icon>
						<text>{{ item2.name }}</text>
					</view>
				</view>
			</view>
			<!-- 没有找到匹配的结果 -->
			<view class="srchIsEmpty" v-if="show === 2">
				<view class="one f f-d a-c">
					<view class="text2"></view>
					<text class="text">没有找到匹配的结果</text>
					<text class="text1">您可以试试下面的建议搜索</text>
				</view>
				<view class="list2">
					<view class="popularSearches">热门搜索</view>
					<view class="mingcheng f f-w">
						<view v-for="(item3, index3) in hot" :key="index3">
							<text @click="clkToJump1(item3)">{{ item3.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 搜索成功 -->
			<view class="recommendedSrch" v-if="show === 3">
				<view v-for="(item4, index4) in data" :key="index4">
					<view class="list a-cr" @click="clkToJump(item4)">
						<u-icon name="search" color="#FFFFFF" size="24"></u-icon>
						<text>{{ item4.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: 0,
			uid: 0,
			keyword: '', //
			user: [], //用户搜索历史
			hot: [], //热门搜索
			rcmd: [], // 推荐
			data: [], // 搜索成功
			page: 1,
			limit: 10,
		};
	},
	onShow() {
		//this.clearHst()
	},
	onLoad() {
		this.uid = getApp().globalData.uid;
		this.getSrchTerms();
		this.getRecommendations();
	},
	methods: {
		shutDn() {
			this.show = 0;
			this.getSrchTerms();
		},

		// 搜索框输入时
		changeContent(e) {
			console.log('e :>> ', e);
			this.show = 1;
			if (!e) return (this.show = 0);
		},
		// 点击取消
		cancelClk() {
			this.show = 0;
			var _this = this;
			this.getSrchTerms();
		},
		clkToJump1(e) {
			this.keyword = e.name;
			this.usrSubmission();
		},
		clkToJump2(e) {
			this.keyword = e.search;
			this.usrSubmission();
		},
		// 点击跳转
		clkToJump(e) {
			console.log('e :>> ', e);

			let obj = {
				id: e.id,
				agent: 0,
			};

			uni.navigateTo({
				url: '../garage/garageDetails/garageDetails?obj=' + JSON.stringify(obj),
			});
		},

		clkOn() {
			this.show = 1;
			console.log('this.show :>> ', this.show);
		},

		//获取搜索词
		async getSrchTerms() {
			console.log('uid :>> ', this.uid);
			const res = await this.$u.post('api/user/search', {
				uid: this.uid,
			});
			console.log('获取搜索词 >>  ', res);
			if (!res.code) return;
			this.user = res.data.user;
			this.hot = res.data.hot;
		},
		//搜索清除历史
		async clearHst() {
			const res = await this.$u.post('api/user/search_clear', {
				uid: this.uid,
			});
			this.getSrchTerms();
			console.log('搜索清除历史 >>  ', res);
			if (res.code) {
				uni.$showMsg(res.msg);
			}
		},
		//获取推荐搜索
		async getRecommendations() {
			const res = await this.$u.post('api/user/recommendation', {
				uid: this.uid,
			});
			console.log('获取推荐搜索 >>  ', res);
			if (!res.code) return;
			this.rcmd = res.data;
		},
		// 用户搜索词提交
		async usrSubmission() {
			const res = await this.$u.post('api/user/user_save_search', {
				uid: this.uid,
				name: this.keyword,
				page: this.page,
				limit: this.limit,
			});
			console.log('用户搜索词提交 >>  ', res);
			if (res.code === 0) {
				this.show = 2;
			} else {
				this.show = 3;
				this.data = res.data;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	background-color: #111111;
	overflow: scroll;

	.head {
		width: 100%;
		height: 242rpx;
		background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E6%A4%AD%E5%9C%86%204%402x.png') no-repeat center;
		background-size: cover;
		padding: 20rpx 31rpx;

		/deep/.u-input {
			font-size: 21rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #dcdcdc;
			letter-spacing: 1rpx;
		}
		/deep/ .u-action {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}

		.defSrch {
			width: 690rpx;
			//height: 466rpx;
			background: #1f1f1f;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 30rpx;
			.hst {
				.text {
					height: 28rpx;
					line-height: 28rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				.text1 {
					height: 22rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #b50000;
				}
			}
			.list1 {
				width: 100%;
				.text {
					background: #111111;
					border-radius: 6rpx;
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
					margin-right: 30rpx;
					padding: 14rpx 21rpx;
				}
			}
			.list2 {
				width: 100%;

				.popularSearches {
					width: 200rpx;
					margin-top: 50rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				.popularSearches::after {
					content: '';
					display: inline-block;
					width: 40rpx;
					height: 28rpx;
					background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E7%BB%84%206%402x.png') no-repeat center;
					background-size: cover;
					margin-left: 10rpx;
				}

				.mingcheng {
					text {
						display: block;
						background: #111111;
						border-radius: 6rpx;
						margin-top: 20rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
						margin-right: 30rpx;
						padding: 14rpx 21rpx;
					}
				}
			}
		}

		.recommendedSrch {
			width: 690rpx;
			//height: 690rpx;
			background: #1f1f1f;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 30rpx;
			.hst {
				.text {
					height: 28rpx;
					line-height: 28rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
			}
			.list {
				height: 73rpx;
				line-height: 73rpx;
				border-bottom: 2rpx solid #111111;
				text {
					height: 23rpx;
					line-height: 23rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
					margin-left: 21rpx;
				}
			}
		}
		.srchIsEmpty {
			width: 690rpx;
			//height: 690rpx;

			background: #1f1f1f;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 30rpx;
			.one {
				.text2 {
					background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/xuzhu.png) no-repeat center;
					background-size: cover;
					width: 254rpx;
					height: 294rpx;
					margin-top: 75rpx;
				}
				.text {
					height: 34rpx;
					line-height: 34rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					margin-top: 15rpx;
					margin-bottom: 13rpx;
				}
				.text1 {
					line-height: 29rpx;
					height: 29rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
					margin-bottom: 141rpx;
				}
			}
			.list2 {
				width: 100%;

				.popularSearches {
					width: 200rpx;
					margin-top: 50rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				.popularSearches::after {
					content: '';
					display: inline-block;
					width: 40rpx;
					height: 28rpx;
					background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E7%BB%84%206%402x.png') no-repeat center;
					background-size: cover;
					margin-left: 10rpx;
				}

				.mingcheng {
					text {
						display: block;
						background: #111111;
						border-radius: 6rpx;
						margin-top: 20rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
						margin-right: 30rpx;
						padding: 14rpx 21rpx;
					}
				}
			}
		}
	}
}
</style>
